<template>
    <div>
        <el-input v-model="value" :placeholder="$t('public.selectPl')" @focus="visible = true" :disabled="disabled" readonly size="small" :title="value" />
        <el-dialog :visible="visible" :title="$t('inspectionManagement.selectMaterial')" width="1000px" append-to-body top="14vh" class="knowledge-dialog" :close-on-click-modal="false" :before-close="close" @close="onClose" @open="onOpen">
            <div>
                <el-form :model="searchForm" size="small" label-position="left" label-suffix=":" ref="searchForm" label-width="80px">
                    <el-row :gutter="24">
                        <el-col :span="6">
                            <el-form-item :label="$t('inventoryManagement.materialName')" prop="materialName">
                                <el-input v-model.trim="searchForm.materialName" :placeholder="$t('public.inputPl')" @keyup.enter.native="getList" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item :label="$t('inventoryManagement.materialNo')" prop="materialCode">
                                <el-input v-model.trim="searchForm.materialCode" :placeholder="$t('public.inputPl')" @keyup.enter.native="getList" />
                            </el-form-item>
                        </el-col>
                        <!-- <el-col :span="6">
                            <el-form-item :label="$t('inventoryManagement.maturity')" prop="maturity">
                                <el-input v-model="searchForm.maturity" :placeholder="$t('public.inputPl')" @keyup.enter.native="getList" />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="6">
                            <el-form-item style="text-align:right">
                                <el-button type="primary" icon="el-icon-search" class="search-btn" @click="getList" size="mini">{{ $t("public.search") }}</el-button>
                                <el-button icon="el-icon-refresh" size="mini" @click="reset">{{ $t("public.reset") }}</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="container-table">
                    <el-table max-height="350" border stripe :data="materialList">
                        <el-table-column :label="$t('public.serialNum')" type="index" width="50" align="center">
                            <template slot-scope="scope">
                                <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('inventoryManagement.materialNo')" align="left" prop="materialCode" width="130" />
                        <el-table-column :label="$t('inventoryManagement.materialName')" align="left" prop="materialName" minWidth="160" />
                        <!-- <el-table-column :label="$t('inventoryManagement.materialType')" align="left" prop="materialType" minWidth="160" /> -->
                        <!-- <el-table-column :label="$t('inventoryManagement.maturity')" align="left" prop="maturity" minWidth="160" /> -->
                        <!-- <el-table-column label="物料小类" align="left" prop="groupingCode" minWidth="160" /> -->
                        <el-table-column label="厂区" align="left" prop="plantName" minWidth="160" />
                        <el-table-column :label="$t('public.opera')" align="center" width="100">
                            <template slot-scope="scope">
                                <a class="action-wrap" @click="choose(scope)" style="color:#5a9eaf">
                                    {{$t('rule.select')}}
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" layout="total, sizes, prev, pager, next, jumper" />
                </div>
            </div>

            <div slot="footer">
                <el-button size="mini" type="default" icon="el-icon-close" @click="handleConfirm">{{ $t("btn.close") }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { listMaterialMessage } from '@/api/basic/materialMessage'
import { statisticsPage } from '@/api/statistical/statistical'
import { getVersion, } from '@/api/inspectionManagement/inspectionManagement'

export default {
    name: 'MaterialDialog',
    props: {
        value: {
            type: [String, Number, Array, Object],
            default() {
                return ''
            },
        },
        sourceType: {
            type: String,
        },
        chartType: {
            type: String,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        params: {
            type: Object,
            default: null,
        },
        // 是否请求构建版本号
        buildVersion: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            total: 1,
            typeList: [
                {
                    materialName: 'xx物料',
                    materialNo: '12345',
                    materialType: '1',
                    materialTypeName: '大类1',
                    maturity: 1,
                },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            materialList: [],
            searchForm: {
                materialName: null,
                materialNo: null,
                materialType: null,
            },
            visible: false,
            data: null,
            title: '',
        }
    },
    methods: {
        getList() {
            let action = this.sourceType ? statisticsPage : listMaterialMessage
            action({
                ...this.queryParams,
                ...this.searchForm,
                samplingAmount: this.chartType,
            }).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.materialList = response.rows
                    this.total = response.total
                }
            })
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.searchForm = {}
            this.getList()
        },
        // 窗口打开
        onOpen() {
            this.getList()
        },
        async choose(scope) {
            console.log(scope)
            let data = scope.row
            let version = void 0;
            if(this.buildVersion){
                // 从父级传值获取检验项id
                const {inspectionId}  = this?.params??{}
                version = await getVersion({
                    factoryList: [{
                        planFactoryName: data.plantName,
                        planFactoryCode: data.plantCode
                    }],
                    materialCode: data.materialCode,
                    id: inspectionId
                }).then(res=>res.msg).catch((res) => void 0)
                if(!version) return
            }
            console.log('封装获取版本号',version)
            this.$emit('callback', {...data,version})
            this.visible = false
        },
        // 窗口关闭
        onClose() {},
        handleConfirm() {
            this.visible = false
        },
        // 窗口关闭前执行
        close() {
            this.visible = false
        },
        /**
         * 
                factoryList: this.currentFactory,
                materialCode: this.viewModel.materialCode,
                supplierCode: this.viewModel.supplierCode,
         * @param {*} params 
         */
        async buildVersionFn(params){
            if(!this.buildVersion) return void 0;
                
            let res = await
            console.log(res)
            if(res.code == 200) return res.msg
            return void 0;
        }
    },
}
</script>

<style scoped>
::v-deep .el-dialog__footer {
    text-align: center;
}
.search-btn {
    background: #20b09f;
    border-color: #20b09f;
}
</style>
